import React, { Component } from 'react'
import {Input,Button,Table,Modal,Select} from 'antd'
import request from '../../util/request'
const { Option } = Select;

export default class Score extends Component {
    state = {
        list:[],       //成绩列表
        key:'',        //搜索关键词
        total:0,       //数据总数
        current:1,     //当前页码
        visible:false,  //控制弹窗显示影藏
        notAdd:[],      //没有录入成绩的人员列表
        theory:'',      //理论成绩
        skill:'',        //技能成绩
        username:'',    //用户名
        num:'',          //学号
        id:''           //编辑的id
    }

    componentDidMount(){
        this.getList();
    }
    getList= () => {
        let {key} = this.state;
        console.log(key);
        request.get('/api/score',{key}).then(res => {
            console.log(res);
            if(res.code === 1){
                this.setState({
                    list:res.data,
                    total:res.total,
                    current:1
                })
            }
        })
    }

    //打开弹窗
    showModal = () => {
        //编辑和添加唯一的区别就是：id
        //获取没有录入成绩的人员列表
        request.get('/api/notAdd').then(res => {
            if(res.code === 1){
                this.setState({
                    visible: true,
                    notAdd:res.data
                });
            }
        })
    }

    //关闭弹窗
    handleCancel = e => {
        console.log(e);
        this.setState({
          visible: false,
        });
        this.reset();
    };

    //点击确定
    handleOk = e => {
        console.log("=====");
        //username,skill,theory,num
        let {skill,theory,num,username,id} = this.state;
        let url = '/api/score';
        let type = 'post';
        if(id){
            //编辑
            url += `/${id}`;
            type = 'put'
        }
        request[type](url,{skill,theory,num,username}).then(res => {
            if(res.code === 1){
                this.reset();
                this.getList();
                this.handleCancel();
            }
        })
      };

    reset = () => {
        this.setState({
            skill:'',
            theory:'',
            num:'',
            username:'',
            id:''
        })
    }

    changeSelect = (value,option) => {
        this.setState({
            username:value,
            num:option.num
        })
    }
    

    render() {
        let {list,total,key,current,visible,notAdd,theory,skill,id,username} = this.state;
        const columns = [
            {
              title: '姓名',
              dataIndex: 'username'
            },
            {
              title: '理论',
              dataIndex: 'theory'
            },
            {
              title: '技能',
              dataIndex: 'skill'
            },
            {
                title:'操作',
                render: (data) => {  //每行的数据
                    return <div>
                        <Button onClick={() => {this.edit(data)}}>编辑</Button>
                        <Button danger onClick={() => {this.del(data.id)}}>删除</Button>
                    </div>   
                }
            }
        ];
        return (
            <div>
                成绩管理
                <div className="top">
                    <Input value={key} onChange={this.change} name="key"/>
                    <Button onClick={this.search}>搜索</Button>
                    <Button onClick={this.showModal}>添加</Button>
                </div>
                <div>
                    <Table dataSource={list} columns={columns} rowKey="id" pagination={{
                        total,
                        pageSize:1,
                        current,
                        onChange:this.changePage
                    }}/>;
                    <Modal
                        title="Basic Modal"
                        visible={visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        >
                        姓名：{id?<span>{username}</span>:<Select
                            style={{ width: 200 }}
                            placeholder="Select a person"
                            onChange={this.changeSelect}
                        >
                            {notAdd.length && notAdd.map(item => <Option key={item.id} value={item.username} disabled={item.num=='1234'} num={item.num}>{item.username}-{item.num}</Option>)}
                        </Select>}<br></br>
                        理论：<Input value={theory} onChange={this.change} name="theory"/><br></br>
                        技能：<Input value={skill} onChange={this.change} name="skill"/>
                    </Modal>
                </div>
            </div>
        )
    }

    //删除
    del = (id) => {
        request.delete(`/api/score/${id}`).then(res => {
            if(res.code === 1){
                this.getList();
            }
        })
    }

    //编辑
    edit = (data) => {
        let {id,num,username,theory,skill} = data;
        this.setState({
            id,
            num,
            username,
            theory,
            skill,
            visible:true
        })
    }

    //改变页码
    changePage = (page) => {
        this.setState({
            current:page
        })
    }

    change = (e) => {
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    search = () => {
        this.getList();
    }
}
